<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rectangle</title>
</head>
<body>
<canvas width="500" height="500" style="border: 1px solid #333333"></canvas>
</body>
<script type="module">
    import {createProgram,createShader} from './utils.js';
    function main() {
        const vSource = `
            attribute vec4 a_position;
            void main(){
                gl_Position = a_position;
            }
        `;

        const fSource = `
            void main(){
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;

        const canvas = document.querySelector('canvas');
        const gl = canvas.getContext('webgl');

        const vShader = createShader(gl,gl.VERTEX_SHADER,vSource);
        const fShader = createShader(gl,gl.FRAGMENT_SHADER,fSource);
        const program = createProgram(gl,vShader,fShader);
        gl.useProgram(program)
        const a_position = gl.getAttribLocation(program,'a_position');

        const vertexs = new Float32Array([
            -0.5,0.5,
            -0.5,-0.5,
            0.5,0.5,
            0.5,-0.5
        ]);
        const glBuffer = gl.createBuffer(); // 创建缓冲区对象
        gl.bindBuffer(gl.ARRAY_BUFFER,glBuffer) // 绑定缓冲区对象
        gl.bufferData(gl.ARRAY_BUFFER,vertexs,gl.STATIC_DRAW) // 将数据写入缓冲区对象中
        gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,0,0) // 将缓冲区对象分配给一个attribute变量
        gl.enableVertexAttribArray(a_position) // 开启attribute变量


        gl.clearColor(0.0, 0.0, 0.0, 1.0)
        gl.clear(gl.COLOR_BUFFER_BIT)
        // gl.drawArrays(gl.TRIANGLE_STRIP,0,4)
        gl.drawArrays(gl.TRIANGLE_FAN,0,4)
    }
    main()
</script>
</html>